<template>
    <div class="TodoList">
        <Top  @addTodoObj="addTodoObj" />
        <List 
        :todoList="todoList" 
        :checkAllTodo="checkAllTodo" />
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    import Top from './components/Top.vue'
    import List from './components/List.vue'

    export default{
        name:"App",
        components:{Top,List},
        methods:{
            //添加一个todo
            addTodoObj(todoObj){
                this.todoList.unshift(todoObj);
            },
            //取消勾选or勾选一个todo
            checkTodo(id){
                this.todoList.forEach((todo)=>{
                    if(todo.id == id)todo.done = !todo.done
                })
            },
            deleteTodo(_,id){
                this.todoList = this.todoList.filter( todo=> todo.id !== id)
            },
            //全选or全不选
            checkAllTodo(done){
                this.todoList.forEach((todo)=>{
                    todo.done = done;
                })
            },
            //清除所有已经完成的todo
            clearAllTodo(){
                //过滤所有done:true的元素
               this.todoList = this.todoList.filter(todo => !todo.done )
            },
            //更改
            updateTodo(id,title){
                this.todoList.forEach((todo)=>{
                    if(todo.id == id)todo.title = title
                })
            }
            
        },
        data(){
            return{
                todoList:JSON.parse(localStorage.getItem('todoList'))||[],
            }
        },
        watch:{
            todoList:{
                deep:true,
                handler(value){
                    localStorage.setItem('todoList',JSON.stringify(value));
                },
            }
        },     
        mounted(){
            this.pubId = pubsub.subscribe("deleteTodo",this.deleteTodo);
            this.$bus.$on("checkTodo",this.checkTodo);
            this.$bus.$on("checkAllTodo",this.checkAllTodo);
            this.$bus.$on("clearAllTodo",this.clearAllTodo);
            this.$bus.$on("updateTodo",this.updateTodo);
        },  
        beforeDestroy(){
            this.$bus.$off("checkTodo");
            pubsub.unsubscribe(this.pubId);
            this.$bus.$off("checkAllTodo");
            this.$bus.$off("clearAllTodo");
            this.$bus.$off("updateTodo");
        },
    }
</script>
   
<style>
    .TodoList{
        width: 800px;
        height: 700px;
        box-shadow: darkgrey 5px 5px 20px 5px ;
        border-radius: 15px;
    }
</style>